
<template>
  <view class="publish_article flex column">
    <!-- 2.0.19支持autoBack，默认为false -->
    <u-navbar title="" @rightClick="rightClick" :autoBack="true">
      <template #center>
        <view class="center_column flex column">
          <span class="tittle_info">发布论坛内容</span>
          <span>{{ userinfo.nickname }}</span>
        </view>
      </template>
      <template #right>
        <view class="pbulish_btn" @click="publishAllList">发布 </view>
      </template>
    </u-navbar>
    <view class="tittle">
      <!-- 标题 -->
      <up-input
        class="up_input"
        placeholder="标题"
        v-model="publishList.title"
        adjustPosition
        maxlength="50"
        border="surround"
      ></up-input>
    </view>
    <!-- 正文 -->
    <u--textarea
      class="u_textarea"
      placeholder="请输入正文 (支持插入图片和文字) 最多添加9张图片，文字支持500字以内"
      v-model="publishList.descript"
      adjustPosition
      maxlength="500"
      height="300"
      border="none"
    ></u--textarea>
    <!-- 标签 -->

    <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="120">
      <view
        id="demo1"
        style="position: relative"
        class="scroll-view-item_H uni-bg-red"
        v-for="(item, index) in publishPhoto"
        :key="index"
      >
        <view class="imageList">
          <image :src="item" alt="" />
        </view>
        <image
          style="position: absolute; right: 24rpx; top: 18rpx; width: 40rpx; height: 40rpx"
          src="../../assets/images/cha.png"
          @click="delement(item)"
        />
      </view>
    </scroll-view>

    <view class="address_input" v-if="addressShow">
      <view class="address_img"><image src="../../assets/images/location.png" alt="" /></view>
      <view class="address_input_text">
        <up-input
          placeholder="请输入地址"
          placeholderStyle="color: #9e9e9e"
          color="#9e9e9e"
          style="border: none"
          border="surround"
          v-model="publishList.address"
        ></up-input>
      </view>
      <view class="address_move"> <image src="../../assets/images/move.png" alt="" @click="removeAddress" /> </view>
    </view>

    <view class="address_info">
      <view
        class="flex items"
        style="
          border: 2rpx solid #306eff;
          border-radius: 46rpx 46rpx 46rpx 46rpx;
          padding: 0 8rpx;
          margin-right: 30rpx;
          margin-top: 12rpx;
        "
        v-for="(item, index) in tagList"
        :key="index"
      >
        <view class="address_icon">
          <image src="../../assets/images/HT.png" alt="" />
        </view>
        <view class="address_text">{{ item.name }}</view>
        <view class="address_move" @click="delementTag(item)">
          <image src="../../assets/images/move.png" alt="" />
        </view>
      </view>
    </view>

    <!-- 选择 -->
    <view class="publish_morechange flex items justify-between">
      <view class="publish_morechange_left">
        <view style="position: relative; display: flex">
          <image src="../../assets/images/photo.png" alt="" @click="tittleUpload" />
          <u-badge
            style="position: absolute; right: -15rpx; top: -12rpx; color: #fff"
            :type="type"
            :value="publishPhoto.length"
          >
          </u-badge>
        </view>

        <image src="../../assets/images/huati.png" alt="" @click="getTagsList" />
        <image src="../../assets/images/zuobiao.png" alt="" @click="getLocationInfo" />
      </view>
      <view class="publish_morechange_right">
        <image src="../../assets/images/fenxiang.png" alt="" />
        <span>上传设备检测数据</span>
      </view>
    </view>

    <!-- 弹出框 -->
    <u-action-sheet
      style="height: 200rpx"
      :actions="list"
      :title="title"
      @select="selectClick"
      :show="show"
    ></u-action-sheet>
    <!-- 位置定位提示框 -->
    <ModalBox :data="modalData" @cancel="onModalBoxCancel" @confirm="onModalBoxConfirm"></ModalBox>
  </view>
</template>

<script setup>
import { publishApi } from "@/api/publish";
import { userApi } from "@/api/user";

onLoad(() => {
  // const userinfoData = uni.getStorageSync("userInfo");
  // const getUserinfoData = JSON.parse(userinfoData);
  // nickname.value = getUserinfoData.nickname;
  getUserInfo();
});
const modalData = ref({
  show: false,
  title: "确定获取当前位置吗?",
  btn1: "取消",
  btn2: "确定",
  type: 1
});
const type = ref("error");
const valueNum = ref(0);
const userinfo = ref({});
const getUserInfo = () => {
  userApi.userinfo().then((res) => {
    console.log("用户信息", res.data);
    userinfo.value = res.data;
  });
};
const list = ref([]);
//获取标签列表
const getTagsList = () => {
  show.value = true;
  publishApi.publishTags().then((res) => {
    // let newList=res.data
    // newList.shift
    list.value = res.data;
    list.value.shift();
    console.log("数据", res.data);
  });
};
//选择标签
const tagList = ref([]);
const tagListId = ref([]);
const newList = ref([]);
const selectClick = (e) => {
  close();
  if (tagList.value.length >= 3) return uni.showToast({ title: "No more than 3 articles", icon: "none" });
  console.log("e", e);

  // publishList.value.tag.push(e);
  tagList.value.push(e);
  tagList.value.forEach((item) => {
    console.log("item.id)", item.id);
    tagListId.value.push(item.id);
    newList.value = Array.from(new Set(tagListId.value));

    publishList.value.tag = newList.value.join(",");
  });
};
// 模态框操作
const onModalBoxCancel = () => {
  modalData.value.show = false;
};

//删除上传地址
const removeAddress = () => {
  (publishList.value.address = ""), (addressShow.value = false);
};

//确定按钮
const onModalBoxConfirm = () => {
  uni.getLocation({
    type: "WGS84", // 坐标系类型
    success: function (res) {
      var latitude = res.latitude; // 维度
      var longitude = res.longitude; // 经度
      publishList.value.lat = latitude;
      publishList.value.lon = longitude;
      modalData.value.show = false;
      addressShow.value = true;
      console.log("经度：" + longitude + "，纬度：" + latitude);
    },
    fail: function (res) {
      console.log("获取定位失败：" + res.errMsg);
    }
  });
};
//获取地址
const getLocationInfo = () => {
  modalData.value.show = true;
};
//发布
const publishAllList = () => {
  if (publishList.value.title == "") {
    uni.showToast({ title: "请输入标题", icon: "none" });
    return;
  }
  if (publishList.value.descript == "") {
    uni.showToast({ title: "请输入正文", icon: "none" });
    return;
  }
  if (publishPhoto.value.length > 9) {
    uni.showToast({ title: "最多只能选择9张照片", icon: "none" });
    return;
  }
  publishApi.publishForumAdd(publishList.value).then((res) => {
    if (res.code == 1) {
      uni.showToast({ title: res.msg, icon: "none" });
      uni.switchTab({
        url: "/pages/tabbar/home"
      });
    }
    if (res.code == 0) {
      uni.showToast({ title: res.msg, icon: "none" });
    }
  });
};

//删除
const delement = (url) => {
  // console.log('12121212',id);
  publishPhoto.value.forEach((item, index) => {
    if (item == url) {
      publishPhoto.value.splice(index, 1);
    }
  });
  valueNum.value = publishList.value.images.length;
  publishList.value.images = publishPhoto.value.join(",");
};

//标签删除
const delementTag = (tag) => {
  console.log("tag", tag);
  tagList.value.forEach((item, index) => {
    if (item.id == tag.id) {
      tagList.value.splice(index, 1);
    }
  });
  tagListId.value = [];
  newList.value = [];
  if (tagList.value.length === 0) {
    publishList.value.tag = "";
  } else {
    tagList.value.forEach((item) => {
      tagListId.value.push(item.id);
      newList.value = Array.from(new Set(tagListId.value));
      publishList.value.tag = newList.value.join(",");
    });
  }
};

const show = ref(false);
const open = () => {
  // console.log('open');
};
const close = () => {
  show.value = false;
};
const publishList = ref({
  title: "",
  descript: "",
  images: "",
  tag: "",
  address: "",
  lon: "",
  lat: ""
});

const addressShow = ref(false);

const uploadApi = "http://app.antiraedi.com/api/common/upload"; //上传接口
//图片上传
const avatarTittle = ref();
const publishPhoto = ref([]);
const tempFilePaths = ref();
const imageList = ref([]);
const tittleUpload = () => {
  // userApi.upload()
  uni.chooseImage({
    count: 9, // 图片数量
    sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
    sourceType: ["album", "camera"], //从相册选择或者拍照
    success: (res) => {
      console.log("图片上传", res.tempFilePaths);
      const tempFilePaths = res.tempFilePaths;
      for (let i = 0; i < tempFilePaths.length; i++) {
        uni.uploadFile({
          url: uploadApi, //上传图片api
          filePath: tempFilePaths[i],
          header: {
            Authorization: userinfo.token,
            "content-type": "multipart/form-data"
          },
          name: "file",
          success: (res) => {
            let dataInfo = JSON.parse(res.data);
            // console.log("返回", dataInfo);
            publishPhoto.value.push(dataInfo.data.url);

            imageList.value.push(dataInfo.data.url);

            valueNum.value = imageList.value.length;

            console.log(" valueNum.value = imageList.value.length;", valueNum.value);
            publishList.value.images = imageList.value.join(",");
            console.log("图片上传publishList.value.images", publishList.value.images);
            // console.log('publishList.value.images',publishList.value.images);
            uni.showToast({
              title: dataInfo.msg,
              icon: "none"
            });
          }
        });
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.scroll-Y {
  height: 300rpx;
}
.scroll-view_H {
  white-space: nowrap;
  width: 100%;
}
.scroll-view-item {
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  font-size: 36rpx;
}
.scroll-view-item_H {
  display: flex;
  display: inline-block;
  height: 220rpx;
  width: 220rpx;

  .imageList {
    margin-top: 20rpx;

    image {
      width: 196rpx;
      height: 196rpx;
      border-radius: 12rpx 12rpx 12rpx 12rpx;
    }
  }
}
.center_column {
  display: flex;
  align-items: center;
  justify-content: center;
  .tittle_info {
    font-size: 34rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    line-height: 50rpx;
  }
  span {
    font-size: 20rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.38);
    line-height: 22rpx;
  }
}
.pbulish_btn {
  width: 96rpx;
  height: 48rpx;
  line-height: 48rpx;
  background: #306eff;
  border-radius: 46rpx 46rpx 46rpx 46rpx;
  opacity: 1;
  font-size: 24rpx;
  font-family: PingFang SC-Medium, PingFang SC;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
.publish_article {
  box-sizing: border-box;
  padding: 22rpx 32rpx;
  height: 100%;
  //   width: 100%;
  background-color: #fff;
  .tittle {
    margin-top: 128rpx;
    height: 92rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    border-bottom: 2rpx solid #e6e6e6;
    .up_input {
      height: 100%;
      // width: 100%;
      border: none;
      font-size: 28rpx;
      font-family: PingFang SC-Bold, PingFang SC;
      font-weight: bold;
      color: rgba(0, 0, 0, 0.87);
    }
  }
  .u_textarea {
    background: #ffffff;
    // border: 1rpx solid red;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    opacity: 1;
    margin-top: 28rpx;
    height:600rpx;
    font-size: 28rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
  }
  .publish_image {
    height: 196rpx;
    border: 1px solid red;
    margin-top: 56rpx;
  }
  .address_input {
    border: 1rpx solid red;
    height: 52rpx;
    margin-top: 30rpx;
    // width: 100%;
    border-radius: 46rpx 46rpx 46rpx 46rpx;
    opacity: 1;
    border: 2rpx solid #306eff;
    display: flex;
    align-items: center;
    padding: 0rpx 16rpx;
    .address_img {
      height: 40rpx;
      width: 40rpx;
      image {
        height: 100%;
        width: 100%;
      }
    }
    .address_input_text {
      flex: 1;
      padding-left: 6rpx;
    }

    // u-input u-border u-input--radius u-input--square
    .address_input_text ::v-deep(.u-border) {
      border: none;
    }
    .address_move {
      height: 40rpx;
      width: 40rpx;
      image {
        height: 100%;
        width: 100%;
      }
    }
  }
  .address_info {
    margin-top: 30rpx;
    min-width: 100rpx;
    margin-bottom: 30rpx;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    // height: 52rpx;
    opacity: 1;
    margin-right: 12rpx;

    .address_icon {
      height: 32rpx;
      width: 32rpx;
      margin-left: 10rpx;
      display: flex;
      align-items: center;
      image {
        height: 100%;
        width: 100%;
      }
    }
    .address_text {
      font-size: 24rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #306eff;
      line-height: 52rpx;
      margin: 0 5rpx;
    }
    .address_move {
      display: flex;
      align-items: center;
      height: 32rpx;
      width: 32rpx;
      image {
        height: 100%;
        width: 100%;
      }
    }
  }
  .position_bottom {
    position: fixed;
    bottom: 80rpx;
    left: 32rpx;
  }
  .publish_morechange {
    height: 48rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    opacity: 1;
    // margin-top: 200rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .publish_morechange_left {
      width: 208rpx;
      display: flex;
      align-items: center;
      justify-content: space-around;
      image {
        height: 48rpx;
        width: 48rpx;
      }
    }
    .publish_morechange_right {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      image {
        height: 48rpx;
        width: 48rpx;
      }
      span {
        font-size: 28rpx;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.38);
      }
    }
  }
  .tips {
    margin: 20rpx 0;
    font-size: 24rpx;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.87);
    .tipsInfo {
      margin: 0rpx 24rpx;
    }
  }
}
</style>
